import React, {useEffect, useRef, useState} from "react";
import {createStyles} from "antd-style";
import {debounce} from "@/utils/Utils.ts";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: flex;
            flex-direction: column;
            width: 100%;
            .imgContainer {
                position: relative;
                .content {
                    position: absolute;
                    left: 0;
                    top: 0;
                    padding: 10px;
                    font-weight: 700;
                    font-size: 20px;
                    text-shadow: 0 0 8px #000, 0 0 8px #000;
                }
                .last {
                    background-color: #000;
                    font-size: 20px;
                    padding: 20px;
                    color: #fff;
                    text-align: center;
                }
                img {
                    display: block;
                    width: 100%;
                    object-fit: contain;
                }
            }
        `
    }
})

interface Props {
    props: {
        photoContainerIndex: number
        photoInfo: [{
            name: string
            size: number
        }]
    }
}

const getPhotoLink = (containerIndex: number, index: number): string => {
    return `/api/photo/${containerIndex}/${index}`
}

const imageCount = 5;

const PhotoView2: React.FC<Props> = (prop) => {
    const {photoContainerIndex, photoInfo} = prop.props
    const styles = useStyles().styles;
    const container = useRef<HTMLDivElement>()

    // 所有显示的图片
    const [images, setImages] = useState<[{link: string, index: number}] | []>([])
    // 当前图片
    const [currentIndex, setCurrentIndex] = useState<number>(0)

    useEffect(() => {
        window.scroll({
            top: 0,
            // behavior: 'smooth'// 这个会影响下面的滚动事件
        })
        setCurrentIndex(0)
    }, [photoContainerIndex]);

    useEffect(() => {
        const allImageCount = photoInfo[photoContainerIndex].size;

        const temp = []
        for (let i = 0; i < Math.min(allImageCount, imageCount + currentIndex); i++) {
            temp.push({
                link: getPhotoLink(photoContainerIndex, i),
                index: i
            })
        }
        if (imageCount + currentIndex >= allImageCount) {
            temp.push({
                index: -1
            })
        }
        // @ts-ignore
        setImages(temp)

        window.onscroll = debounce(() => {
            if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight - 100) {
                setCurrentIndex(currentIndex + imageCount)
            }
        }, .2)
    }, [photoContainerIndex, currentIndex]);

    return (
        <div className={styles.container} ref={container}>
            {(()=>{
                return images.map((item) => {
                    if (item.index == -1) {
                        return (
                            <div className="imgContainer" key={item.index}>
                                <div className="last">
                                    没有了
                                </div>
                            </div>
                        )
                    }
                    return (
                        <div className="imgContainer" key={item.index}>
                            <div className="content">{item.index}</div>
                            <img src={item.link} alt={"图片"}/>
                        </div>
                    )
                })
            })()}
        </div>
    )
}

export default PhotoView2;
